<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap缩略图、警告框</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <!--<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>-->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--<link href="../css/starter-template.css" rel="stylesheet">-->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<div class="container">

    <br/>
    <!-- 警告框的使用例子： -->
    <!-- data-dismiss="alert"：为按钮添加该属性可以后可以关闭该警告框  javascript实现 -->
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>
            广告：康师傅蜂蜜柚子茶，好喝到爆了，点击进入
            <a href="https://www.masterkong.net.cn/" class="alert-link">购买</a>
            <span class="glyphicon glyphicon-search"></span>
        </p>
    </div>


    <!-- row：代表快速构建栅格系统，下面可以使用col-sm-2.....等等,最终达到响应式的功能 -->
    <div class="row">
        <!-- 缩略图  thumbnail 属性 -->
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/0.jpg" alt="可爱的图片提示">
            </a>
        </div>
        <!-- 缩略图  thumbnail 属性 -->
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/1.jpg" alt="可爱的图片提示">
            </a>
        </div>
        <!-- 缩略图  thumbnail 属性 -->
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/1.jpg" alt="可爱的图片提示">
            </a>
        </div>
        <!-- 缩略图  thumbnail 属性 -->
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/1.jpg" alt="可爱的图片提示">
            </a>
        </div>
    </div>

    <!-- 缩略图 自定义 -->
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="../img/1.jpg" alt="可爱的图片提示">
                <div class="caption">
                    <h3>标题呀</h3>
                    <p>内容简介呀：添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。</p>
                    <p style="color: red">内容简介呀：添加一点点额外的</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!-- 警告框 html页面中的alert提示。 -->
    <!-- data-dismiss="alert"：为按钮添加该属性可以后可以关闭该警告框  javascript实现 -->
    <div class="col-sm-3 alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>alert alert-success</p>
    </div>
    <div class="col-sm-3 alert alert-info" role="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>alert alert-info</p>
    </div>
    <div class="col-sm-3 alert alert-warning" role="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>alert alert-warning</p>
    </div>
    <div class="col-sm-3 alert alert-danger" role="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>alert alert-danger<a href="http://www.baidu.com" class="alert-link">百度</a></p>
    </div>
</div>
</body>
</html>